<template>
  <div class="Count">
    <van-cell-group title="第0位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(red0Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ red0Count[key] }}</span>
      </div>
    </van-cell-group>

    <van-cell-group title="第1位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(red1Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ red1Count[key] }}</span>
      </div>
    </van-cell-group>

    <van-cell-group title="第2位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(red2Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ red2Count[key] }}</span>
      </div>
    </van-cell-group>

    <van-cell-group title="第3位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(red3Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ red3Count[key] }}</span>
      </div>
    </van-cell-group>

    <van-cell-group title="第4位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(red4Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ red4Count[key] }}</span>
      </div>
    </van-cell-group>


    <van-cell-group title="第5位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(blue0Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ blue0Count[key] }}</span>
      </div>
    </van-cell-group>

    <van-cell-group title="第6位中,各数字出现次数" class="section-item">
      <div v-for="(key,index) in Object.keys(blue1Count)" class="item">
        <span>{{ key }}</span>
        <span>{{ blue1Count[key] }}</span>
      </div>
    </van-cell-group>
  </div>
</template>
<script>

import datas from '@/data/demo'

export default {
  name: "Count",
  data() {
    return {
      red0Count: {},
      red1Count: {},
      red2Count: {},
      red3Count: {},
      red4Count: {},

      blue0Count: {},
      blue1Count: {},
    }
  },
  mounted() {
    this.initView();
  },
  methods: {
    initView() {
      let data = JSON.parse(JSON.stringify(datas));
      data.reverse();

      let Num0 = [];
      let Num1 = [];
      let Num2 = [];
      let Num3 = [];
      let Num4 = [];

      let Num5 = [];
      let Num6 = [];

      data.map(item => {
        let red0 = item.lotteryDrawResult.split(' ')[0];
        let red1 = item.lotteryDrawResult.split(' ')[1];
        let red2 = item.lotteryDrawResult.split(' ')[2];
        let red3 = item.lotteryDrawResult.split(' ')[3];
        let red4 = item.lotteryDrawResult.split(' ')[4];

        let blue0 = item.lotteryDrawResult.split(' ')[5];
        let blue1 = item.lotteryDrawResult.split(' ')[6];

        Num0.push(red0);
        Num1.push(red1);
        Num2.push(red2);
        Num3.push(red3);
        Num4.push(red4);

        Num5.push(blue0);
        Num6.push(blue1);
      });

      this.red0Count = this.calcCount(Num0);
      this.red1Count = this.calcCount(Num1);
      this.red2Count = this.calcCount(Num2);
      this.red3Count = this.calcCount(Num3);
      this.red4Count = this.calcCount(Num4);

      this.blue0Count = this.calcCount(Num5);
      this.blue1Count = this.calcCount(Num6);

      console.log(this.red0Count)
    },

    calcCount(array) {
      let dataCount = {};
      array.map(key => {
        let keyStr = key + '_'
        dataCount[key] = dataCount[key] ? dataCount[key] + 1 : 1
      });
      return dataCount;
    }
  }
}

</script>

<style lang="scss" scoped>
.Count {
  .section-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .item {
      display: flex;
      flex-direction: column;
      border: 1px solid #f2f2f2;
      margin: 5px;
      padding: 4px;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
